<template>
  <div class="editInfo">
    <div class="boardTitle">
      修改资料
    </div>
    <div class="infoBoard">
      <div class="title">
        #{{ userinfo.id }} {{ userinfo.username }} {{ userinfo.registerdate }}加入
      </div>
      <div class="form-group">
        <label for="age" class="input-title">年龄:</label>
        <input type="number" class="form-control" id="age" v-model="age">
      </div>
      <div class="form-group">
        <div>性别:</div>
        <input type="radio" id="sex" name="sex" value="man" v-model="sex">男
        <input type="radio" id="sex1" name="sex" value="woman" v-model="sex">女
      </div>
      <div class="form-group">
        <label for="note">签名:</label>
        <textarea class="form-control" id="note" placeholder="Enter note" rows="4" v-model="note"></textarea>
      </div>
      <button class="btn btn-success btn-modify" @click="modify">修改</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'editInfo',
  data () {
    var user = this.$store.state.userinfo
    return {
      userinfo: this.$store.state.userinfo,
      age: user.age,
      sex: user.sex,
      note: user.note
    }
  },
  methods: {
    modify: function () {
      this.$http.post('/java_kunpeng/modifyInfo', {
        age: this.age,
        sex: this.sex,
        note: this.note
      })
        .then((response) => {
          const data = response.data
          if (data.state === '0') {
            alert('修改成功!')
            const info = {
              id: this.userinfo.id,
              username: this.userinfo.username,
              age: this.age,
              sex: this.sex,
              note: this.note,
              registerdate: this.registerdate
            }
            this.$store.dispatch('login', info)
            this.$router.push('/userPage/checkInfo')
          }
        })
        .catch((error) => {
          alert('修改失败:' + error.toString())
        })
    }
  }
}
</script>

<style scoped>
  .editInfo {

  }
  .boardTitle {
    font-size: 32px;
    font-weight: bold;
    margin:5px 10px 5px;
    float: left;
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    margin: 5px;
  }
  .infoBoard {
    height: 380px;
    width: 75%;
    border: 1px gainsboro solid;
    border-radius: 20px;
    box-shadow: 0px 0px 10px gainsboro;
    float: left;
    margin: 0px 10px 40px;
  }
  .form-group {
    width: 80%;
    margin: auto;
  }
  .btn-modify {
    margin-top: 20px;
    margin-left: 80%;
  }
</style>
